<script lang="ts" setup>
const options = {
  color: [
    "white",
    "black",
    "gray",
    "yellow",
    "orange",
    "orangered",
    "blue",
    "skyblue",
    "purple",
    "gold",
    "green",
    "red",
    "brown",
  ],
  barWidth: 72,
  barMargin: 8,
};
const lineNum = Math.floor(1920 / (options.barMargin + options.barWidth));
type Bar = { height: number; color: string };
type Falls = { height: number; bar: Bar[] }[];
const falls = <Falls>new Array();
for (let i = 0; i < 100; i++) {
  const height = Math.ceil(Math.random() * (300 - 50)) + 50;
  const bar = {
    height,
    color: options.color[Math.floor(Math.random() * options.color.length)],
  };
  if (i < lineNum) {
    falls.push({
      height,
      bar: [bar],
    });
  } else {
    const inx = minH(falls);
    falls[inx].bar.push(bar);
    falls[inx].height += bar.height;
  }
}
function minH(list: Falls) {
  let res = [0, list[0].height];
  for (let i = 1; i < list.length; i++) {
    if (list[i].height < res[1]) res = [i, list[i].height];
  }
  return res[0];
}
// console.log("falls", falls);
</script>

<template>
  <div class="fallsFlow">
    <div class="line" v-for="(line, index) in falls" :key="index">
      <div
        class="bar"
        v-for="(bar, inx) in line.bar"
        :key="inx"
        :style="{
          height: `${bar.height}px`,
          color: ['white', 'yellow'].includes(bar.color) ? '' : '#fff',
          background: bar.color,
        }"
      >
        {{ index + inx }}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.fallsFlow {
  display: flex;
  .line {
    width: v-bind("options.barWidth + 'px'");
    margin-right: v-bind("options.barMargin + 'px'");
    .bar {
      margin-bottom: 10px;
      font-size: 24px;
      font-weight: 600;
      text-align: center;
      border-radius: 4px;
    }
  }
}
</style>
